﻿// 轮播图编辑页面：从 row['image'] 加载图片数据
define(['jquery'], function ($) {
    
    // 扩展 Controller.api 对象，添加从 row['image'] 加载图片数据的方法
    function extendController() {
        if (typeof Controller !== 'undefined' && Controller.api) {
            // 重写原有的 loadExistingImages 方法
            var originalLoadExistingImages = Controller.api.loadExistingImages || function() {};
            
            Controller.api.loadExistingImages = function(addImageGroup) {
                try {
                    // 直接从隐藏字段中读取 row 数据
                    var rowData = $('#row').val();
                    
                    // 添加更严格的数据验证
                    if (rowData && 
                        typeof rowData === 'string' && 
                        rowData.trim() !== '' && 
                        rowData !== 'undefined' && 
                        rowData !== 'null') {
                        try {
                            var row = JSON.parse(rowData);
                            // 检查是否有 image 字段
                            if (row.image && 
                                typeof row.image === 'string' && 
                                row.image.trim() !== '' && 
                                row.image !== 'undefined' && 
                                row.image !== 'null') {
                                try {
                                    // 解析 image 字段中的 JSON 数据
                                    var imageData = JSON.parse(row.image);
                                // 清空现有的图片容器
                                $('#slider-images-container').empty();
                                
                                // 遍历图片数据并创建图片组
                                var imageCount = 0;
                                var hasImages = false;
                                
                                $.each(imageData, function(key, item) {
                                    if (item && (item.title || item.href || item.src)) {
                                        imageCount++;
                                        hasImages = true;
                                        
                                        // 如果有 addImageGroup 函数，使用它
                                        if (typeof addImageGroup === 'function') {
                                            addImageGroup(item);
                                        } else {
                                            // 否则直接创建图片组HTML
                                            createImageGroupHtml(imageCount, item);
                                        }
                                    }
                                });
                                
                                // 更新图片计数
                                $('#image-count').text(imageCount);
                                
                                // 重新绑定事件
                                if (Controller.api.handleCollect) {
                                    $('.collect-btn').off('click').on('click', Controller.api.handleCollect);
                                }
                                
                                // 如果没有有效的图片数据，添加一个空的图片组
                                if (!hasImages) {
                                    if (typeof addImageGroup === 'function') {
                                        addImageGroup();
                                    }
                                }
                            } catch (imageParseError) {
                                if (typeof addImageGroup === 'function') {
                                    addImageGroup();
                                }
                            }
                        } else {
                            if (typeof addImageGroup === 'function') {
                                addImageGroup();
                            }
                        }
                    } catch (rowParseError) {
                        if (typeof addImageGroup === 'function') {
                            addImageGroup();
                        }
                    }
                } else {
                    if (typeof addImageGroup === 'function') {
                        addImageGroup();
                    }
                }
                } catch (e) {
                    // 出错时添加一个空的图片组
                    if (typeof addImageGroup === 'function') {
                        addImageGroup();
                    }
                }
            };
        } else {
        }
    }
    
    // 创建图片组HTML的辅助函数
    function createImageGroupHtml(imageCount, item) {
        var imageGroupHtml = '<div class="slider-image-group" data-index="' + imageCount + '">' +
            '<div class="panel panel-info">' +
                '<div class="panel-heading">' +
                    '<h5 class="panel-title">' +
                        '<i class="fa fa-image"></i> 图片 ' + imageCount +
                        '<button type="button" class="btn btn-xs btn-danger pull-right remove-image-group" style="margin-top: -2px;">' +
                            '<i class="fa fa-trash"></i> 删除' +
                        '</button>' +
                    '</h5>' +
                '</div>' +
                '<div class="panel-body">' +
                    '<div class="row">' +
                        '<div class="col-md-4">' +
                            '<div class="form-group">' +
                                '<label class="control-label">图片标题:</label>' +
                                '<input type="text" name="images[' + imageCount + '][title]" class="form-control" placeholder="请输入图片标题" data-tip="图片标题" value="' + (item.title || '') + '" />' +
                            '</div>' +
                        '</div>' +
                        '<div class="col-md-4">' +
                            '<div class="form-group">' +
                                '<label class="control-label">图片链接:</label>' +
                                '<input type="text" name="images[' + imageCount + '][href]" class="form-control" placeholder="请输入图片链接" data-tip="图片链接" value="' + (item.href || '') + '" />' +
                            '</div>' +
                        '</div>' +
                        '<div class="col-md-4">' +
                            '<div class="form-group">' +
                                '<label class="control-label">图片地址:</label>' +
                                '<div class="input-group">' +
                                    '<input type="text" name="images[' + imageCount + '][src]" class="form-control image-src-input" placeholder="请选择图片" data-tip="图片地址" value="' + (item.src || '') + '" id="images-' + imageCount + '-src" />' +
                                    '<div class="input-group-btn">' +
                                        '<button type="button" class="btn btn-danger plupload" data-input-id="images-' + imageCount + '-src" data-mimetype="image/*" data-multiple="false" data-preview-id="p-images-' + imageCount + '">' +
                                            '<i class="fa fa-upload"></i>' +
                                        '</button>' +
                                        '<button type="button" class="btn btn-success collect-btn" data-group-index="' + imageCount + '">' +
                                            '<i class="fa fa-download"></i> 抓取' +
                                        '</button>' +
                                    '</div>' +
                                '</div>' +
                                '<ul class="row list-inline plupload-preview" id="p-images-' + imageCount + '" style="margin-top: 10px;"></ul>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';
        
        $('#slider-images-container').append(imageGroupHtml);
    }
    
    // 页面加载完成后初始化
    $(document).ready(function() {
        // 延迟执行以确保 Controller 已初始化
        setTimeout(function() {
            extendController();
        }, 500);
    });
    
    return {
        extendController: extendController
    };
});
